<template>
     <!-- 一条文章单元格 -->
     <div>
     <van-cell>
       <!-- 标题区域的插槽 -->
       <template #title>
         <div class="title-box">
           <!-- 标题 -->
           <span>{{item.title}}</span>
           <!-- 单图 -->
           <img v-if="item.cover.type==1" alt="" class="thumb" v-lazy="item.cover.images[0]">
         </div>
           <!-- 多图 -->
         <div class="thumb-box" v-if="item.cover.type==3">
            <img v-for="(imgurl,index) in item.cover.images" :key="index"  class="thumb" v-lazy="imgurl">
         </div>
       </template>
       <!-- label 区域的插槽 -->
       <template #label>
         <div class="label-box">
           <div>
             <span>{{item.aut_name}}</span>
             <span>{{item.comm_count}}评论</span>
             <span>{{guolv(item.pubdate)}}</span>
           </div>
           <!-- 反馈按钮 -->
           <van-icon name="cross"  @click.stop="shanchu" v-if="isshow"/>
         </div>
       </template>
     </van-cell>
     <!-- 反馈面板 -->
     <van-action-sheet v-model="show" 
     :actions="actions" 
     @select="onSelect" 
     get-container="body" 
     @cancel='guanbi'
     @click-overlay="mengban"
     :cancel-text="bootomtxt" /> 
     </div>
</template>
   
<script>
import {timeAgo} from '@/utils/date.js'
import {firstActions,secondActions} from '@/api/reports.js'
 export default {
   data(){
     return{
       show:false,  //反馈面板显示或隐藏
       actions: firstActions,
       bootomtxt:'取消',  //底部文字
     }
   },
   props:['item','isshow'],
   methods:{
      guolv(value){
        return timeAgo(value)
      },
      shanchu(){
        this.show=true
      },
      onSelect(action,item) {  //action为绑定的对象，item为索引值
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // this.show = false;
      if(action.name=='反馈垃圾内容'){
             this.actions=secondActions
             this.bootomtxt='返回'
      }else if(action.name=='不感兴趣'){
          this.$emit('dislikev',this.item.art_id)
          //反馈成功后 无论成功还是失败都先让弹出框消失
          this.show=false
      }else{ //进入此判断一定点击的是二级面板里面的数据
         this.$emit('dislikevv',this.item.art_id,action.value)
          //反馈成功后 无论成功还是失败都先让弹出框消失
           this.actions=firstActions
           this.bootomtxt='取消'
          this.show=false
          //同时也要把数据置空
      }
    },
    guanbi(){//点击取消触发事件
          if(this.bootomtxt=='返回'){  //如果点击的文字是返回 要将 文字列表换回来,并且将返回换成取消,还要将show改为true,因为点击取消默认会变成false
                this.actions=firstActions
                this.bootomtxt='取消'
                this.show=true   
        }
    },
    mengban(){//点击遮罩层关闭后触发事件  将数值初始化
          this.actions=firstActions
          this.bootomtxt='取消'
    },
   }
 }
</script>
   
<style scoped lang="less">
   /* 标题样式 */
   .title-box {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
   }
   
   /* label描述样式 */
   .label-box {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   /* 文章信息span */
   .label-box span{
       margin: 0 3px;
       &:first-child{
           margin-left: 0;
       }
   }
  .thumb{
    width: 113px;
    height:70px;
    background-color:#f8f8f8;
    object-fit: cover;
  }
  .thumb-box{
    display: flex;
    justify-content: space-between;
  }
   </style>
   